<!--
 * @页面名称:锁屏
 * @描述: 
 * @作者: 
 * @Date:
-->
<template>
  <transition name="slide-up">
    <LockScreenPage v-if="isLock && isMouted && $route.name != 'login'" />
  </transition>
</template>

<script setup lang="ts">
import { computed, ref, onMounted } from "vue";
import LockScreenPage from "./LockScreenPage.vue";
import { useLocksSreenStore } from "@/stores/modules/lockscreen";

// pinia
const lockscreenStore = useLocksSreenStore();
// 是否显示锁屏
const isLock = computed(() => lockscreenStore.isLock);

// 页面是否加载完成
const isMouted = ref(false);

onMounted(() => {
  setTimeout(() => {
    isMouted.value = true;
  });
});
</script>

<style scoped lang="scss">
.slide-up-enter-active {
  animation: slide-up 0.5s;
}

.slide-up-leave-active {
  animation: slide-up 0.5s reverse;
}

@keyframes slide-up {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }
}
</style>
